<template>
  <div
    :class="{
      'web-container': deviceType == 'web',
      'mobile-container': deviceType == 'mobile',
      'ipad-container': deviceType == 'ipad',
    }"
  >
    <div class="navBar" ref="navArea">
      <div class="area">
        <div class="leftLogo">安世代</div>
        <div class="rightMenu">
          <div class="iconButtons" v-if="deviceType == 'mobile'">
            <div class="buttonsItem">
              <i class="el-icon-search" @click="handlIndexSearch()"></i>
            </div>
            <div class="buttonsItem">
              <i class="el-icon-user" @click="handlGoUser()"></i>
            </div>
            <div class="buttonsItem">
              <i class="el-icon-s-fold" @click="drawer = true"></i>
            </div>
          </div>

          <div
            :class="currentIndex == index ? 'activedMenu' : 'menu'"
            v-for="(item, index) in menuList"
            :key="index"
            @click="handlSelectMenu(item, index)"
            v-if="deviceType == 'web' || deviceType == 'ipad'"
          >
            {{ item.title }}
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧弹出抽屉 -->
    <el-drawer
      title=""
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
    >
      <div
        class="drawerItem"
        v-for="(item, index) in menuList"
        :key="index"
        @click="handlSelectMenu(item, index)"
      >
        <div class="itemBox">
          <div :class="currentIndex == index ? 'activePageName' : 'pageName'">
            {{ item.title }}
          </div>
          <div class="rightIcon"><i class="el-icon-arrow-right"></i></div>
        </div>
      </div>
    </el-drawer>
    <!-- 占位盒子 -->
    <div class="empty" ref="emptyHight"></div>
    <!-- 导航栏搜索区域 -->
    <div
      class="navBarSearch"
      ref="searchHeight"
      v-if="showSearch && deviceType == 'mobile'"
    >
      <el-input
        placeholder="请输入内容"
        v-model="indexSearch"
        class="input-with-select"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="searchList()"
        ></el-button>
      </el-input>
    </div>
  </div>
</template>

<script>
export default {
  name: "navBar",
  data() {
    return {
      showSearch: false,
      currentIndex: 0,
      indexSearch: "",
      resizeListener: null,
      drawer: false,
      direction: "rtl",
      menuList: [
        {
          id: 1,
          title: "首頁",
          path: "/",
        },
        {
          id: 2,
          title: "關於我們",
          path: "/about/about",
        },
        {
          id: 3,
          title: "祭祖服務與產品",
          path: "/serives/serives",
        },
        {
          id: 4,
          title: "實時新訊",
          path: "/news/news",
        },
        {
          id: 5,
          title: "百家論壇",
          path: "/froum/froum",
        },
        {
          id: 6,
          title: "百家姓風采",
          path: "/family/family",
        },
        {
          id: 7,
          title: "會員中心",
          path: "/center/center",
        },
      ],
    };
  },
  watch: {
    $route: {
      handler: function (val) {
        this.currentIndex = this.menuList.findIndex(
          (item) => item.path == val.path
        );
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    this.listenNavHeight();
  },
  beforeDestroy() {
    if (this.resizeListener) {
      window.removeEventListener("resize", this.resizeListener);
    }
  },
  methods: {
    listenNavHeight() {
      const navArea = this.$refs.navArea;
      this.resizeListener = () => {
        const navAreaHeight = navArea.clientHeight;
        this.$refs.emptyHight.style.height = `${navAreaHeight}px`;
        if (this.showSearch != false && this.deviceType == "mobile") {
          this.$refs.searchHeight.style.top = `${navAreaHeight}px`;
        } else {
          this.showSearch = false;
        }
      };
      window.addEventListener("resize", this.resizeListener);
      this.resizeListener();
    },

    searchList() {
      console.log(this.indexSearch, "搜索内容");
    },

    handlIndexSearch() {
      this.showSearch = !this.showSearch;
    },

    handlGoUser() {
      this.$router.push({ name: "Center" });
    },

    handleClose() {
      this.drawer = false;
    },

    handlSelectMenu(item, index) {
      if (this.$route.path == item.path) {
        return;
      }
      this.currentIndex = index;
      const path = item.path || "/";
      this.$router.push(path);
      this.drawer = false;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/viewCss/nav/nav.scss";
</style>